<template>
  <div class="timeOrMarquee">
    <!-- 时间 -->
    <div class="time">
      <div>{{ time.day }}</div>
      <div>{{ timer }} {{ time.week }}</div>
    </div>
    <!-- 跑马灯 -->
    <div class="marquee">
      <marquee behavior="" direction="">{{ title }}</marquee>
    </div>
    <!-- 搜索 -->
    <div class="search">
      <input type="text" v-model="name" placeholder="请输入检索关键词" />
      <button @click="search">搜 索</button>
    </div>
  </div>
</template>

<script>
import { day } from "@/utils/timer";
var interval;
export default {
  name: "TimeOrMarquee",
  data() {
    return {
      time: {},
      timer: "",
      title: "",
      name: "",
    };
  },
  mounted() {
    this.getMarquee();
    this.timeing();
    interval = setInterval(() => {
      let time = new Date();
      let hours = time.getHours();
      hours = hours < 10 ? "0" + hours : hours;
      let minutes = time.getMinutes();
      minutes = minutes < 10 ? "0" + minutes : minutes;
      let second = time.getSeconds();
      second = second < 10 ? "0" + second : second;
      this.timer = `${hours}:${minutes}:${second}`;
    }, 1000);
  },
  methods: {
    timeing() {
      this.time = day();
    },
    // 获取跑马灯数据
    async getMarquee() {
      let result = await this.$API.title.reqGetList();
      if (result.status == 200) {
        this.title = result.data.title;
      }
    },
    // 搜索按钮
    search() {
      if (this.name == "") {
        this.$message({
          message: "搜索不能为空哦",
          type: "warning",
        });
      } else {
        this.$router.push({
          path: "/homePage/catalogue",
          query: {
            name: this.name,
          },
        });
      }
    },
  },
  filters: {},
  beforeDestroy() {
    clearInterval(interval);
  },
};
</script>

<style lang="scss" scoped>
.timeOrMarquee {
  width: 100%;
  height: 1rem;
  background-color: #105592;
  color: white;
  display: flex;
  .time {
    width: 20%;
    height: 100%;
    font-size: 0.3rem;
    // background-color: red;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
  .marquee {
    width: 60%;
    height: 100%;
    font-size: 0.5rem;
    font-weight: bolder;
    color: white;
    // background-color: pink;
    display: flex;
    align-items: center;
  }
  .search {
    width: 20%;
    height: 100%;
    // background-color: greenyellow;
    display: flex;
    align-items: center;
    input {
      font-size: 0.2rem;
      width: 60%;
      height: 55%;
      border-radius: 3px;
      background-color: #105592;
      margin-left: 8px;
    }
    button {
      font-size: 0.2rem;
      width: 20%;
      height: 50%;
      color: white;
      font-weight: 600;
      background-color: #4085bc;
      border-radius: 3px;
      border: 0px;
    }
  }
}
</style>
